<template>
  <div v-loading="vLoading">
    <form>
      <div class="input-control input-user">
        <input v-model="telephone" type="text" placeholder="请输入手机号">
      </div>
      <div class="input-control register-pass">
        <input  v-model="password" type="password" placeholder="请输入验证码">
        <span style="cursor: pointer;">获取短信验证码</span>
      </div>
      <div class="input-control login-fun">
        <span style="float: right; color: #1a1a1a; cursor: pointer;">接受语音验证码</span>
      </div>
      <div class="input-control input-loginBtn">
        <el-button type="primary" @click="doRegister">注册</el-button>
      </div>
      <div class="input-control login-type">
        <span>注册即代表同意</span>
        <a>《WP协议》</a>
        <a>《隐私政策》</a>
        <a style="color: #0084ff;">注册机构号</a>
      </div>
    </form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: "register",
  data () {
    return {
      telephone: '',
      password: '',
      vLoading: false,
      userToken: ''
    }
  },
  methods: {
    doRegister () { // 注册
      var _this = this
      _this.vLoading = true
      this._register({telephone: this.telephone, password: this.password})
        .then((res) => {
          if (res.data.status === 0) { // register success
            this.$message({
              message: '注册成功',
              type: 'success'
            })
            setTimeout(() => {
               _this.doLogin()
            }, 1000)
          }
        })
        .catch((err) => {
           return Promise.reject(err)
        })
    },
    doLogin () { // 获取token
      this._login({telephone: this.telephone, password: this.password})
      .then((res) => {
        this.userToken = res.data.result.token
        this.doGetUserInfo()
      })
      .catch((err) => {
        return Promise.reject(err)
      })
    },
    doGetUserInfo () { // 获取用户信息
      this._getUserInfo({token: this.userToken})
        .then((res) => {
          this.vLoading = false
          this.$router.push({name: '/'})
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    ...mapActions(['_register', '_login', '_getUserInfo'])
  }
}
</script>

<style scoped lang="less">
  .login-type{
    text-align: center;
    font-size: 14px;
    color: #808080;
  }
  .register-pass{
    position: relative;
    span{
      text-align: right;
      display: inline-block;
      right: 0px;
      top: 0px;
      position: absolute;
      width: 40%;
      height: 36px;
      line-height: 36px;
      color: #77839c;
    }
    a{
      cursor: pointer;
    }
  }
</style>
